<template>
  <el-menu 
    :default-openeds="['1']" 
    :router="true"
    :default-active="defaultActive"
  >
    <el-submenu index="1">
      <template slot="title"><i class="el-icon-message"></i>管理员</template>
      <el-menu-item-group>
        <template slot="title">电影管理</template>
        <el-menu-item index="/intheaters" :route="{path: '/intheaters'}">热映</el-menu-item>
        <el-menu-item index="/comingsoon" :route="{path: '/comingsoon'}">待映</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="用户管理">
        <el-menu-item index="/users" :route="{path: '/users'}">创建用户</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      defaultActive: '/users'
    }

  },

  watch: {
    $route: {
      handler(to, from) {
        let path = to.path
        this.defaultActive = path
      },

      immediate: true
    }
  }
}
</script>

<style lang='stylus' scoped>
.el-menu-item.is-active {
  background #e9eef3
}
</style>